<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       html{
            width: 100%;
            margin: 0;
            padding: 0;
            background-image: url("images/back2.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
           height: 100%;
        }
    </style>
</head>
<body>
<div>
    <canvas id="bird" width="1900px" height="600px"></canvas>
</div>
<script>
    var canvas = document.getElementById('bird'),
            ctx = canvas.getContext('2d');
    var birds = new Image();
    birds.src = "images/bird.png";
    birds.onload = function (e) {
        var w = 141, h = 85;
        var i = 0;
        var direction=true;
        var x=2;
        var y=2;
        var speed=10;
        function drawBrird() {
            x+=speed;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.save();
            ctx.beginPath();
            if(canvas.width-150<x){
                direction=!direction;
                x=2;
            }
            if(!direction){
                /*图片反转180°函数调用*/
                ctx.translate(canvas.width,0);
                ctx.scale(-1,1);
            }
            //画图
            ctx.drawImage(birds, w * i, 0, w, h, x, 200, w, h);
            ctx.closePath();
            ctx.restore();
            setTimeout(drawBrird, 1000 / 6);
            i++;
            i = i == 8 ? i = 0 : i;
        }

        drawBrird();
    };
</script>
</body>
</html>